<template>
    <div id="class">
        <!-- 无置顶课程 -->
        <div class="non-stick" v-if="havaNoTop">
            <div class="manage">
                <a style="color: #3B3D45">全部课程</a>
                <div>
                    <el-button class="add-course" type="primary" size="mini" @click="createCourseVisible = true">＋&nbsp;创建课程</el-button>
                </div>
            </div>
            <ul class="class-table">
                <li style="margin-right: 23px" v-for="course in courses" v-bind:key="course.cid">
                    <div class="top" @click="jumpToCourse(course)">
                        <div  class="course-name" v-if="course">{{course.courseName}}</div><br/>

                        <div class="course-class">{{course.courseClass}}</div>
                        <div class="add_code">
                            <label>加课码：{{course.courseCode}}</label>
                        </div>
                        <span class="time">
                            {{course.courseYear}}<br/>
                            {{course.courseTerm}}
                        </span>
                    </div>
                    <div class="bottom">
                        <ul>
                          <div style="color: #A0A0A0">近期作业</div>

                          <li class="assignment-box" v-if="course.assignmentList.length>0">
                            <div style="display: flex;justify-content: space-between" v-for="assignment in course.assignmentList.slice(0,2)" :key="assignment.aid">
                              <div class="assignment-name" style="margin-bottom: 20px">{{assignment.assignmentName}}</div>
                              <div >{{assignment.assignmentDesc}}</div>
                            </div>
                          </li>
                          <div style="margin-top: 20px; font-size: 20px" v-else>
                            暂无作业
                          </div>
                        </ul>
                        <div class="foot">
                            <el-avatar style="width: 24px; height: 24px; float: left; margin-right: 10px;" src=""></el-avatar>
                            <label style="float:left; padding-top: 3px;" v-if="teacher">{{teacher.name}}</label>
                            <label style="font-size: 12px; float: right; margin-top: 3px">
                                <a @click="beTop(course.cid)" style="margin-right: 10px; color: #A0A0A0">置顶</a>
                                <el-dropdown trigger="click" @command="more">
                                    <a style="color: #2C58AB">更多<i class="el-icon-s-operation" /></a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue(course ,1)"><a>删除</a></el-dropdown-item>
                                        <el-dropdown-item :command="composeValue(course ,2)">归档</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="top top2"  />
                    <div class="bottom" style="margin: 15px 0 0; padding: 0 16px" @click="createCourseVisible = true">
                        <a style="line-height: 141px">
                            +创建课程
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 有置顶课程 -->
        <div class="stick" v-if="!havaNoTop">
            <div class="manage">
                <a style="color: #3B3D45">置顶课程</a>
                <div>
                    <a><i class="el-icon-sort"></i>&nbsp;&nbsp;课程排序</a>
                    <a @click="archiveManageVisible = true"><i class="el-icon-receiving"></i>&nbsp;&nbsp;归档管理</a>
                    <el-button class="add-course" type="primary" size="mini" @click="createCourseVisible = true">＋&nbsp;创建课程</el-button>
                </div>
            </div>
            <ul class="class-table">
                <li style="margin-right: 23px" v-for="course in topedCourses" v-bind:key="course.cid">
                    <div class="top">
                        <div @click="jumpToCourse(course)" class="course-name" v-if="course">{{course.courseName}}</div>
                        <div class="course-class">{{course.courseClass}}</div>
                        <div class="add_code">
                            <label>加课码：{{course.courseCode}}</label>
                        </div>
                        <span class="time">
                            {{course.courseYear}}<br/>
                            {{course.courseTerm}}
                        </span>
                    </div>
                    <div class="bottom">
                        <ul>
                          <div style="color: #A0A0A0">近期作业</div>
                          <li class="assignment-box" v-if="course.assignmentList.length>0">
                            <div style="display: flex;justify-content: space-between" v-for="assignment in course.assignmentList.slice(0,2)" :key="assignment.aid">
                              <div class="assignment-name" style="margin-bottom: 20px">{{assignment.assignmentName}}</div>
                              <div >{{assignment.assignmentDesc}}</div>
                            </div>
                          </li>
                          <div style="margin-top: 20px; font-size: 20px" v-else>
                            暂无作业
                          </div>
                        </ul>
                        <div class="foot">
                            <el-avatar style="width: 24px; height: 24px; float: left; margin-right: 10px;" src=""></el-avatar>
                            <label style="float:left; padding-top: 3px;" v-if="teacher">{{teacher.name}}</label>
                            <label style="font-size: 12px; float: right; margin-top: 3px">
                                <a @click="cancelTop(course.cid)" style="margin-right: 10px; color: #A0A0A0">取消置顶</a>
                                <el-dropdown trigger="click" @command="more">
                                    <a style="color: #2C58AB">更多<i class="el-icon-s-operation" /></a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue(course ,1)"><a>删除</a></el-dropdown-item>
                                        <el-dropdown-item :command="composeValue(course ,2)">归档</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="manage">
                <a style="color: #3B3D45">其余课程</a>
            </div>
            <ul class="class-table">
                <li style="margin-right: 23px" v-for="course in otherCourses" v-bind:key="course.cid">
                    <div class="top">
                        <div @click="jumpToCourse(course)" class="course-name" v-if="course">{{course.courseName}}</div>
                        <div class="course-class">{{course.courseClass}}</div>
                        <div class="add_code">
                            <label>加课码：{{course.courseCode}}</label>
                        </div>
                        <span class="time">
                            {{course.courseYear}}<br/>
                            {{course.courseTerm}}
                        </span>
                    </div>
                    <div class="bottom">
                        <ul>
                          <div style="color: #A0A0A0">近期作业</div>

                          <li class="assignment-box" v-if="course.assignmentList.length > 0">
                            <div style="display: flex;justify-content: space-between" v-for="assignment in course.assignmentList.slice(0,2)" :key="assignment.aid">
                              <div class="assignment-name" style="margin-bottom: 20px">{{assignment.assignmentName}}</div>
                              <div >{{assignment.assignmentDesc}}</div>
                            </div>
                          </li>
                          <div style="margin-top: 20px; font-size: 20px" v-else>
                            暂无作业
                          </div>
                        </ul>
                        <div class="foot">
                            <el-avatar style="width: 24px; height: 24px; float: left; margin-right: 10px;" src=""></el-avatar>
                            <label style="float:left; padding-top: 3px;" v-if="teacher">{{teacher.name}}</label>
                            <label style="font-size: 12px; float: right; margin-top: 3px">
                                <a @click="beTop(course.cId)" style="margin-right: 10px; color: #A0A0A0">置顶</a>
                                <el-dropdown trigger="click" @command="more">
                                    <a style="color: #2C58AB">更多<i class="el-icon-s-operation" /></a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue(course ,1)"><a>删除</a></el-dropdown-item>
                                        <el-dropdown-item :command="composeValue(course ,2)">归档</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="top top2" />
                    <div class="bottom" style="margin: 15px 0 0; padding: 0 16px" @click="createCourseVisible = true">
                        <a style="line-height: 141px">
                            +创建课程
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 删除课程提示 -->
        <el-dialog
            :visible.sync="dropCourseVisible"
            style="text-align: left; margin-top: 100px"
            width="25%"
            :before-close="handleClose">
            <div>
                <div style="padding-left: 26px; padding-right: 26px;
                            padding-top: 10px; line-height: 52px;
                            color: #a9a9a9; font-size: 18px;" v-if="this.currentCourse">
                    确定要删除“{{this.currentCourse.courseName}}”么？
                </div>
                <div style="padding: 5px 26px 10px;">
                    <p style="line-height: 32px;
                        color: #2d2d2d; font-size: 14px;">
                        您的这个课程的任何信息或评论将被永久删除<br />
                        <span style="color: red">警告：此操作无法撤消</span></p>
                        <p style="color: blue">
                            提醒：已用课程数包含了“删除课程数”</p>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="dropCourseVisible = false" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="dropCourse(currentCourse.cid)">删 除</el-button>
            </span>
        </el-dialog>
        <!-- 归档提示 -->
        <el-dialog
            :visible.sync="archiveVisible"
            style="text-align: left; margin-top: 100px"
            width="25%"
            :before-close="handleClose">
            <div>
                <div style="padding-left: 26px; padding-right: 26px;
                            padding-top: 10px; line-height: 52px;
                            color: #a9a9a9; font-size: 18px">
                    要归档此课程么？
                </div>
                <div style="padding: 5px 26px 10px">
                  <p style="line-height: 32px; color: #2d2d2d; font-size: 14px;">您可以在“课堂”-“归档管理”中查看此课程</p>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="archiveVisible = false" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="allBeArchive(currentCourse.cId)">归档全部</el-button>
                <el-button type="primary" @click="beArchive(currentCourse.cId)">归档自己</el-button>
            </span>
        </el-dialog>
        <!-- 创建课程 -->
        <el-dialog
            title="创建课程"
            :visible.sync="createCourseVisible"
            style="text-align: left; margin-top: 100px"
            width="35%"
            :before-close="handleClose"
            left>
            <div :model="createCourseDTO">
                <div class="input-box">
                    <span>课程名称：</span>
                    <input v-model="createCourseDTO.courseName" type="text" placeholder="请输入课程名称">
                </div>
                <div class="input-box" style="margin-top:20px">
                    <span>班级名称：</span>
                    <input v-model="createCourseDTO.courseClass" type="text" placeholder="请输入班级名称（选填）">
                </div>

                <div class="yearbox">
                  <div style="font-size: 15px">学期：</div>
                    <el-select v-model="createCourseDTO.courseYear" placeholder="请选择年份">
                        <el-option
                        v-for="item in academic_year"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="createCourseDTO.courseTerm" placeholder="请选择学期" style="margin-left: 50px">
                        <el-option
                        v-for="item in semester"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer">

                <el-button @click="cancelCreate" style="margin-right: 20px">取 消</el-button>
                <el-button type="primary" @click="createCourse()" style="margin-right: 40px">创 建</el-button>
            </span>
        </el-dialog>
        <!-- 归档管理 -->
        <el-dialog
            title="归档管理"
            :visible.sync="archiveManageVisible"
            style="text-align: left; margin-top: 100px"
            width="810px"
            :before-close="handleClose"
            center>
            <div style="padding-left: 70px; padding-right: 70px; margin-top: -25px">
                <ul style="left: -95px; position: relative;
                    padding: 30px 70px; width: 670px">
                    <li style="display: inline-block; width: 300px; list-style: none; margin: 0 15px 30px;
                        box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,.12), 0 0 0.1rem rgba(0,0,0,.12); position: relative;
                        box-sizing: border-box; background-clip: padding-box; background: url(../../../static/teacher/archiveBg/1.jpg)"
                        v-for="course in archivedCourses" v-bind:key="course.cId">
                        <div style=" width: 268px;  clear: both; position: relative;
                            height: 72px;  padding: 24px 16px 14px;">
                            <strong style="font-size: 20px; font-weight: lighter;
                                color: #fff; height: 26px; line-height: 26px;">
                                <a style="color: #fff; overflow: hidden; width: 240px; font-size: 20px">
                                    {{course.name}}</a></strong>
                            <el-dropdown trigger="click" @command="operation" style="position: absolute; top: 36px; right: 15px">
                                <a style=" display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center;
                                    background: url(../../../static/teacher/operation.png) center center no-repeat"></a>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="composeValue(course ,1)"><a>恢复</a></el-dropdown-item>
                                    <el-dropdown-item :command="composeValue(course ,2)">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <p style="color: #fff; width: 264px; height: 42px; overflow: hidden;
                                line-height: 20px; padding-top: 14px; font-size: 12px;">角色：老师</p>
                        </div>
                    </li>
                </ul>
            </div>
        </el-dialog>
        <!-- 恢复归档提醒 --><el-dialog
            :visible.sync="archiveTipVisible"
            style="text-align: left; margin-top: 100px"
            width="20%"
            :before-close="handleClose"
            center>
            <div style="padding-left: 26px; padding-right: 26px; padding-top: 10px;
                line-height: 52px; color: #a9a9a9; font-size: 18px">
                要恢复此课程么？</div>
            <div style="padding: 5px 26px 10px">
                <p style="line-height: 32px; color: #2d2d2d; font-size: 14px">
                    您和您的学生将可以重新在此课程中互动。<br> 此课程会在课堂页上显示。</p>
            </div>
            <span slot="footer">
                <el-button @click="archiveTipVisible = false" style="margin-left: 150px; margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="cancelArchive(currentCourse.cId)">恢 复</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { createCourseByTid, getTeacherClassInfo, deleteCourse, updateTop, getCourseTop, updateNoTop } from './../../api/require'
export default {
  data () {
    return {
      tid: '',
      aid: '',
      userName: '',
      teacher: {},
      currentCourse: {},
      createCourseDTO: {},
      courses: [],
      otherCourses: [],
      topedCourses: [],
      archivedCourses: [],
      havaNoTop: true,
      dropCourseVisible: false,
      archiveVisible: false,
      createCourseVisible: false,
      archiveManageVisible: false,
      archiveTipVisible: false,
      add_class_code: '',
      academic_year: [{
        value: '2017-2018',
        label: '2017-2018'
      }, {
        value: '2018-2019',
        label: '2018-2019'
      }, {
        value: '2019-2020',
        label: '2019-2020'
      }, {
        value: '2020-2021',
        label: '2020-2021'
      }],
      semester: [{
        value: '第一学期',
        label: '第一学期'
      }, {
        value: '第二学期',
        label: '第二学期'
      }]
    }
  },
  methods: {
    beTop (id) {
      this.$confirm('你确定要置顶吗？').then(res => {
        updateTop(id).then(res => {
          if (res.data.code === 200) {
            getCourseTop().then(res => {
              console.log('置顶课程', res)
              this.topedCourses = res.data.obj
              if (this.topedCourses.length !== 0) {
                this.havaNoTop = false
                this.otherCourses = this.topedCourses.filter(item => {
                  return !this.courses.includes(item)
                })
              }
            })
            this.$message.success('置顶成功！')
          }
        })
      })
    },
    cancelTop (id) {
      this.$confirm('你确定要取消置顶吗？').then(res => {
        updateNoTop(id).then(res => {
          if (res.data.code === 200) {
            getCourseTop().then(res => {
              this.topedCourses = res.data.obj
              const courseItem = this.courses
              for (let i = 0; i < this.courses.length; i++) {
                for (let j = 0; j < this.topedCourses.length; j++) {
                  if (this.courses[i].cid === this.topedCourses[j].cid) {
                    courseItem.splice(i, 1)
                  }
                }
              }
              this.otherCourses = courseItem
              if (this.topedCourses.length === 0) {
                this.havaNoTop = true
              }
            })
            this.$message.success('取消置顶成功！')
          }
        })
        console.log('......................', res)
      })
    },
    allBeArchive (id) {
      this.archiveVisible = false
      this.$axios.post('api/teacher/allBeArchive?tId=' + this.teacher.tId + '&cId=' + id)
        .then(() => {
          this.$message('归档全部成功！')
          this.reload()
        })
    },
    beArchive (id) {
      this.archiveVisible = false
      this.$axios.post('api/teacher/beArchive?tId=' + this.teacher.tId + '&cId=' + id)
        .then(() => {
          this.$message('归档自己成功！')
          this.reload()
        })
    },
    cancelArchive (id) {
      this.$axios.post('api/teacher/cancelArchive?tId=' + this.teacher.tId + '&cId=' + id)
        .then(() => {
          this.$message('取消归档成功！')
          this.reload()
        })
    },
    cancelCreate () {
      this.createCourseDTO = ''
      this.createCourseVisible = false
    },

    createCourse () {
      this.createCourseVisible = false
      this.createCourseDTO.teacherId = this.tid
      createCourseByTid(this.createCourseDTO).then(res => {
        if (res.data.code === 200) {
          this.$message.success('创建课程成功')
          this.getClassInfo()
        } else {
          this.$message.error(res.data.message)
        }
        this.createCourseDTO = ''
      }).catch(error => {
        console.log(error)
        this.$message.error('创建课程失败')
      })
    },
    dropCourse (id) {
      console.log('hjasdjhjddssssssssss删除课程', id)
      deleteCourse(this.tid, id).then(res => {
        console.log(res)
        this.dropCourseVisible = false
        if (res.data.code === 200) {
          this.$message.success('删除课程成功')
        } else {
          this.$message.error('删除课程失败')
        }

        this.getClassInfo()
      }).catch(e => {
        console.log(e)
        this.$message.error('删除课程失败')
      })
    },
    composeValue (course, row) {
      return {
        course: course,
        row: row
      }
    },
    more (command) {
      if (command.row === 1) {
        this.dropCourseVisible = true
        this.currentCourse = command.course
      } else {
        this.archiveVisible = true
        this.currentCourse = command.course
      }
    },
    operation (command) {
      if (command.row === 1) {
        this.archiveTipVisible = true
        this.currentCourse = command.course
      } else {
        this.dropCourseVisible = true
        this.currentCourse = command.course
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    jumpToCourse (course) {
      console.log('sdiadoaod', course)
      this.$router.push({
        path: '/teacher/course',
        query: {
          cid: course.cid,
          tid: this.tid,
          aid: this.aid
        }
      })
    },
    getClassInfo () {
      getTeacherClassInfo(this.tid).then(res => {
        console.log('leilei', res)
        this.courses = res.data.obj
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted (searchElement, fromIndex) {
    this.tid = sessionStorage.getItem('tid')
    getCourseTop().then(res => {
      console.log('res------', res)
      if (res.data.obj.length !== 0) {
        this.havaNoTop = false
        this.topedCourses = res.data.obj
        this.getClassInfo()
        this.otherCourses = this.topedCourses.filter(item => {
          return !this.courses.includes(item)
        })
      } else {
        this.havaNoTop = true
        this.getClassInfo()
      }
    })
  }

}
</script>
<style scoped>
* {
    font-size: 14px;
}
a {
    text-decoration: none;
}
#mainBody {
  height: 100%;
  width: 100%;
}
.non-stick, .stick {
    height: 100%;
    padding: 0 4% 0;
}
.manage {
    position: relative;
    box-shadow: 0 1px 0 0 rgba(226,230,237,1);
    line-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    clear: left;
}
.manage a {
    color: #78787A;
}
.manage div {
    float: right;
}
.manage div a {
    margin-left: 20px;
}
.class-table {
    flex-wrap: wrap;
    justify-content: space-between;
}
.class-table li {
    width: 300px;
    list-style: none;
    background: #fff;
    position: relative;
    border: 1px solid #E2E6ED;
    border-radius: 8px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    float: left;
}
.course-name {
  color: #fff;
  font-size: 30px;
  line-height: 30px;
  padding: 10px 0;
  /*float: left;*/
  margin-left: 15px;
}
.course-class {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(255,255,255,1);
    line-height: 28px;
    margin-left: 15px;
  /*display: flex;*/
  /*justify-content: left;*/
}
.top {
    clear: both;

  height: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 6px ;
  background: url('../../assets/images/create-course.png') no-repeat;
  background-size: cover;
}
.top2{
  background: url('../../assets/images/create-course2.png');
  background-size: cover;
}
.add_code {
    width: 128px;
    height: 22px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255,255,255,1);
    float: left;
    line-height: 22px;
    text-align: center;
    margin-left: 18px;
    padding-left: 2px;
    padding-right: 4px;
    margin-top: 20px;
}
.add_code label {
    float: left;
    cursor: pointer;
}
.time {
    float: right;
    text-align: left;
    font-size: 12px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(255,255,255,1);
    padding-right: 14px;
    height: 30px;
  margin-top: 15px;
}
.bottom {
    background: #fff;
    clear: both;
    height: 141px;
    border-radius: 0 0 8px 8px;
}
.bottom ul {
    margin-top: 15px;
    padding: 0 16px;
    height: 105px;
    border-bottom: 1px solid rgba(226,230,237,1);
}
.bottom ul .assignment-box{
  width: 100%;
  padding: 10px 0;
  margin: 0;
  border: none;
  font-size: 18px;
  font-weight: bold;
  /*display: flex;*/

  /*justify-content: space-between;*/
}
.bottom .foot {
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
}
.add-course {
    width: 100px;
    height: 36px;
    text-align: center;
    margin-left: 20px;
    background-color: #32baf0;
}
.add-course p {
    font-size: 14px;
    color: rgba(255,255,255,1);
    line-height: 18px;
    margin-left: -5px;
}
.input-box {
    margin-top: -10px;
    height: 38px;
    border-bottom: 1px solid #c8c8c8;
    box-sizing: border-box;
}
.input-box span {
    height: 38px;
    line-height: 38px;
    display: inline-block;
    vertical-align: middle;
    color: #2D2D2D
}
.input-box input, .pop-new-2 .input-box-v2 input {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    width: 260px;
    font-size: 14px;
}
input, select, textarea {
    outline: 0;
    border: none;
    background: 0 0;
    cursor: text;
}
.yearbox {
    justify-content: space-between;
    display: flex;
  margin-top: 20px;
  align-items: center;

    cursor: pointer;
}
</style>
